<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <!-- Initial-Scale: The value specifies the initial zoom level. A 1.0 means that the content
    of 1:1 will be shown. For example, on a screen with 320 px, a 320 px-wide graphic
     will fill the entire width. Therefore,
     a 2.0 results in a 2x magnification. -->

    <!-- User-Scalable: With this attribute, you can define whether the user can zoom in on the page
    (yes) or not (no) -->

    <!-- Minimum-Scale and Maximum-Scale: These two properties make it possible to limit the zoom
    level. Set the maximum scale to 2.0, the content can be increased maximum 2x times. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Tank</title>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen">
</head>

<body>
    <header class="card">
        <h1 class="text-center card-header">Tank Utilities</h1>
    </header>
    <div class="container card-deck text-center mx-auto">

        <!-- First Card -->
        <section class="card shadow-sm">
            <!-- Header -->
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">Water Tank</h4>
            </div>

            <!-- Body -->
            <div class="card-body">
                <!-- Image -->
                <img class="img-fluid" id="img-level-tank" src="img/WaterTank.png" alt="Water Tank">

                <!-- Progress Bar -->
                <div class="progress mt-3 mb-4">
                    <div class="progress-bar-striped active"
                         id="progress-level-tank"
                         role="progressbar"
                         aria-valuemin="0"
                         aria-valuemax="100">
                    </div>
                </div>

                <!-- Button of Drain -->
                <button class="btn btn-danger btn-block btn-lg"
                        id="button-drain" type="button" onclick="drainTank()">Drain</button>
            </div>
        </section>

        <!-- Second Card -->
        <section class="card shadow-sm">
            <!-- Header -->
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">Options</h4>
            </div>

            <section class="row mx-auto py-5">
                <div class="col-5 text-nowrap">Level (Lts) <span id="label-level-tank">5</span></div>
            </section>

            <section class="row mx-auto py-5">
                <!-- Area of buttons for control of tank level. -->
                <button class="col-5 btn btn-primary" id="button-add-level" type="button" onclick="addLevelOfLiquidInTank()">+</button>
                <button class="col-5 btn btn-primary" id="button-sub-level" type="button" onclick="subLevelOfLiquidInTank()">-</button>
            </section>

            <section class="row mx-auto">
                <!-- Area for control of Set Point of tank. -->
                <form class="form-inline">
                    <div class="form-group col-12">
                        <label class="col-sm-5 col-xs-12 text-nowrap" for="input-set-point">Set Point (Lts)</label>
                        <input class="col-sm-3 col-xs-12 form-control mr-sm-3" id="input-set-point" type="number" name="set-point" min="0" required>
                        <button class="col-sm-3 col-xs-12 btn btn-primary btn-block" id="button-set-point" type="button" onclick="setPointOfTank()">Set</button>
                    </div>
                </form>
            </section>

        </section>

        <!-- Third Card -->
        <section class="card shadow-sm">
            <!-- Header -->
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">Setup</h4>
            </div>

            <section class="row mt-3 mx-auto">
                <h4 class="col-12 mb-3">Capacity</h4>
                <form class="form-inline">
                    <div class="form-group col-12 mb-3">
                        <label class="col-sm-5 col-xs-12" for="input-max-level">Maximum</label>
                        <input class="col-sm-4 col-xs-12 form-control" id="input-max-level" type="number" min="0" disabled>
                        <small class="col-sm-3 col-xs-12 form-text text-muted">Lts</small>
                    </div>
                    <div class="form-group col-12 mb-5">
                        <label class="col-sm-5 col-xs-12" for="input-min-level">Minimum</label>
                        <input class="col-sm-4 col-xs-12 form-control" id="input-min-level" type="number" min="0" disabled>
                        <label class="col-sm-3 col-xs-12 form-text text-muted">Lts</label>
                    </div>
                </form>
            </section>

            <section class="row mt-3 mx-auto">
                <h4 class="col-12 mb-3">Alarms</h4>
                <form class="form-inline col-12">
                    <div class="form-group col-12 mb-3">
                        <label class="col-sm-5 col-xs-12" for="input-high-level-alarm">High Level</label>
                        <input class="col-sm-4 col-xs-12 form-control" id="input-high-level-alarm" type="number" disabled>
                        <small class="col-sm-3 col-xs-12 form-text text-muted">Lts</small>
                    </div>
                    <div class="form-group col-12 mb-5">
                        <label class="col-sm-5 col-xs-12" for="input-low-level-alarm">Low Level</label>
                        <input class="col-sm-4 col-xs-12 form-control" id="input-low-level-alarm" type="number" disabled>
                        <small class="col-sm-3 col-xs-12 form-text text-muted">Lts</small>
                    </div>
                </form>
            </section>

            <div class="col-12">
                <button class="col-3 btn btn-primary btn-sm"
                        id="button-edit" type="button"
                        onclick="switchEnableDisableInput()">Edit
                </button>
                <button class="col-3 btn btn-primary btn-sm"
                        id="button-cancel" type="button"
                        onclick="cancelChangesInCapacityAndAlarm()" disabled>Cancel
                </button>
                <button class="col-3 btn btn-primary btn-sm"
                        id="button-confirm" type="button"
                        onclick="confirmChangeInCapacityAndAlarm()" disabled>Confirm
                </button>
            </div>

        </section>
    </div>

    <!-- Support to JQuery-->
    <script src="js/jquery.min.js"></script>
    <!-- Support to Bootstrap-->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <!-- Script and Style Project-->
    <script src="js/main.js" type="text/javascript"></script>

</body>

</html>